<template>
	<view class="">
		<view class="mainpadding ffffff">
			<view class="flexbetween xiahuaxian" @click="uploadImg">
				<view class="ershiba nofonweight xiaohei">客户头像</view>
				<view class="flexright">
					<view class="touxiang" v-if="avatar_text">
						<image :src="avatar_text" mode=""></image>
					</view>
					<view class="xiaolv ershiba" v-else>点击上传</view>
					<!-- <u-icon name="arrow-right" color="#000000" size="12"></u-icon> -->
				</view>
			</view>
			<view class="flexbetween xiahuaxian margin_top">
				<view class="ershiba nofonweight xiaohei">客户姓名</view>
				<input type="text" placeholder="输入姓名" class="textright" v-model="username">
			</view>
			<view class="xiahuaxian flexbetween margin_top">
				<view class="ershiba nofonweight xiaohei">性别</view>
				<view class="flexright">
					<u-radio-group v-model="gender" placement="row" circle>
						<u-radio activeColor="#1ba95b" :customStyle="{marginRight: '30rpx'}" label="男"
							name="1"></u-radio>
						<u-radio activeColor="#1ba95b" label="女" name="2"></u-radio>
					</u-radio-group>
				</view>
			</view>
			<view class="flexbetween xiahuaxian margin_top">
				<view class="ershiba nofonweight xiaohei">联系方式</view>
				<input type="text" placeholder="输入联系方式" class="textright" v-model="mobile">
			</view>
			<view class="xiahuaxian flexbetween margin_top">
				<view class="ershiba nofonweight xiaohei">客户类型</view>
				<view class="flexright">
					<u-radio-group v-model="type" placement="row" circle>
						<u-radio activeColor="#1ba95b" :customStyle="{marginRight: '30rpx'}" label="有效客户"
							name="1"></u-radio>
						<u-radio activeColor="#1ba95b" label="无效客户" name="2"></u-radio>
					</u-radio-group>
				</view>
			</view>
			<view class="flexbetween xiahuaxian margin_top">
				<view class="ershiba nofonweight xiaohei">联系地址</view>
				<input type="text" placeholder="输入联系地址" class="textright" v-model="address">
			</view>

		</view>
		<view class="gudingdb mainpadding">
			<view class="bigbtn" @click="submit">保存</view>
		</view>
	</view>
</template>

<script>
	const httpRequest = require("@/common/httpRequest.js")
	export default {
		data() {
			return {
				listid:"",
				avatar: "",
				avatar_text: "",
				username: "",
				gender: "1",
				mobile: "",
				address: "",
				type: "1",
			}
		},
		onLoad(options) {
			if(options.id){
				this.listid = options.id
				uni.setNavigationBarTitle({
					title:"编辑客户"
				})
				this.getDetail()
			}
		},
		methods: {
			getDetail(){
				httpRequest.request("/api/user/cgKhDetail", 'GET', {
					id:this.listid
				}, false, false, true).then(res => {
					let data = res.data
					this.avatar= data.avatar
					this.avatar_text= data.avatar_text
					this.username= data.username
					this.gender= data.gender.toString()
					this.mobile= data.mobile
					this.address= data.address
					this.type= data.type.toString()
				})
			},
			submit(){
				if(this.avatar==""){
					httpRequest.toast("请上传客户头像")
					return false
				}
				if(this.username==""){
					httpRequest.toast("请输入客户姓名")
					return false
				}
				if(this.mobile==""){
					httpRequest.toast("请输入联系方式")
					return false
				}
				if(this.address==""){
					httpRequest.toast("请输入联系地址")
					return false
				}
				uni.showLoading({
					mask:true,
					title:"请稍后"
				})
				let data = {
					avatar: this.avatar,
					username: this.username,
					gender: this.gender,
					mobile: this.mobile,
					address: this.address,
					type: this.type
				}
				let url = "/api/user/addCgKh"
				if(this.listid){
					url = "/api/user/editCgKh"
					this.$set(data,"id",this.listid)
				}
				httpRequest.request(url, 'GET', data, false, false, true).then(res => {
					uni.hideLoading()
					httpRequest.toast(res.msg)
					if(res.code==1){
						setTimeout(()=>{
							uni.navigateBack(1)
						},1000)
					}
				})
			},
			uploadImg(value, upImgs, upImgs_text) {
				let _this = this;
				uni.showActionSheet({
					itemList: ['相机', '相册'],
					success: function(res) {
						// 选择相机走0
						if (res.tapIndex == 0) {
							httpRequest.chooseImage(1, ['camera']).then(res => {
								for (var i = 0; i < res.length; i++) {
									_this.uploadImageService(res[i], upImgs, upImgs_text)
								}
							}).catch(err => {});
						}
						// 选择相册走1
						if (res.tapIndex == 1) {
							httpRequest.chooseImage(1, ['album']).then(res => {
								for (var i = 0; i < res.length; i++) {
									_this.uploadImageService(res[i], upImgs, upImgs_text)
								}
							}).catch(err => {});
						}
					},
					fail: function(res) {}
				});
			},
			uploadImageService(url, upImg, upImgs_text) {
				let _this = this;
				httpRequest.uploadFile('/api/common/upload', url).then(res => {
					let image_item = res.fullurl;
					this.avatar = res.url;
					this.avatar_text = image_item
				}).catch(err => {});
			},
		}
	}
</script>

<style lang="scss" scoped>
	.huibtn {
		width: 686rpx;
		height: 88rpx;
		background: #F5F5F5;
		border-radius: 44rpx 44rpx 44rpx 44rpx;
		font-size: 32rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		font-weight: normal;
		color: #777777;
	}

	.touxiang {
		width: 60rpx;
		height: 60rpx;
		border-radius: 50%;

		image {
			border-radius: 50%;
			width: 100%;
			height: 100%;
		}
	}

	page {
		background: #F5F5F5;
	}
</style>